<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/MaoYan.css" rel="stylesheet"/>
    <link href="./css/baner.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./js/swiper/swiper-bundle.min.css" />

    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 3.将组件渲染到页面上 -->
        <myheader></myheader>
        <!-- 4.将父组件的参数传给子组件 -->
        <mycontent :movie="movieArr"></mycontent>
        <myfooter></myfooter>
    </div>

    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>

    <script type="template" id="head">
        <div class="hread-box"> 
            <div class="hread">
                <span>猫眼电影</span>
                <div class="nav">
                    <img src="https://p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png" />
                </div>
            </div>
            <div class="app_bar">
                <div>
                    <img src="https://p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png@80q" />
                </div>
                <a class="benefit-text" href="#">发现最新最热电影</a>
                <a class="app-text" href="#">打开App></a>
            </div>
            <div class="app_tlti">
                <div class="app_city">
                    <span class="app_name">深圳</span>
                    <i class="app_xia"></i>
                </div>
                <div class="app_dao">
                    <a class="hot-item" href="#">热映</a>
                    <a class="hot-item activ" href="#">影院</a>
                    <a class="hot-item" href="#">待映</a>
                    <a class="hot-item" href="#">经典电影</a>
                </div>
                <a href="#" class="link"></a>
            </div>
            <div class="nav-wrap">
                <div class="item">全域</div>
                <div class="item">品牌</div>
                <div class="item">特色</div>
            </div>
        </div>
    </script>

    <script type="template" id="count">
        <div class="list-wrap">
            <a href="#" class="item" v-for="item in movie">
                <div class="title-block">
                    <div class="line-ellipsis">
                        <span>{{item.nm}}</span>
                        <span class="price">{{item.price}}</span>
                        <span class="p">元起</span>
                    </div>
                    <div class="location">
                        <div class="flex">{{item.addr}}</div>
                    </div>
                    <div class="label-block">
                        <span class="cc" v-for="i in item.labels" :style="{border:'1px solid '+i.color}">
                            <span :style="{color:i.color}">{{i.name}}<span>
                        </span>
                    </div>
                    <div class="discount" v-show="item.promotion.cardPromotionTag != ''">
                        <div class="card">
                            <img src="https://i.maoyan.com/images/dpmmweb/cinemaList/img/base/base64/card.png"/>    
                        </div>
                        <div class="discount-text">{{item.promotion.cardPromotionTag}}</div>
                    </div>
                </div>
            </a>
            <a class="tip-open-app">
                <img src="https://p1.meituan.net/scarlett/87654d5e4e5e057206969c3abb8e09f33151.png"/>
                <span>打开App</span>
            </a>
        </div>
    </script>
    <script type="template" id="foolt">
        <div class="floor">
            <a href="#">
                <span>
                    <svg class="nav-txt" width="25" height="25" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>电影1</title><g fill="#f03d37" fill-rule="evenodd"><path d="M24.994 47c-.71 0-1.422-.034-2.136-.102C12.445 45.913 4.14 37.645 3.11 27.24c-.657-6.63 1.65-13.115 6.332-17.796 4.68-4.68 11.162-6.992 17.796-6.333 10.36 1.027 18.624 9.29 19.65 19.65.592 5.984-1.192 11.796-5.022 16.365-.162.193-.158.463.007.63l3.425 3.424c.586.584.586 1.534 0 2.12-.586.586-1.535.586-2.12 0l-3.426-3.425c-1.274-1.273-1.353-3.284-.185-4.677 3.307-3.946 4.847-8.97 4.335-14.142-.886-8.942-8.018-16.074-16.96-16.96-5.732-.562-11.336 1.426-15.38 5.47-4.042 4.042-6.034 9.647-5.467 15.378.89 8.98 8.058 16.117 17.045 16.968 3.867.37 7.68-.417 11.03-2.267.725-.4 1.637-.138 2.037.588.4.725.137 1.638-.588 2.038-3.26 1.8-6.896 2.73-10.626 2.73"></path><path d="M28 16c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3M28 34c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3M34 28c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3M16 28c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3"></path></g></svg>
                    <p class="nav-txt">电影/影院</p>
                </span>
            </a>
            <a href="#">
                <span>
                    <img src="https://p0.meituan.net/scarlett/551cc48b3a71478a57b40ac4a00179d61401.png"/>
                <p>视频</p> 
                </span>
            </a>
            <a href="#">
                <span>
                    <img src="https://p0.meituan.net/scarlett/58a786cefee2770a152ed50c992a864b1254.png"/>
                    <p>小视频</p>
                </span>
            </a>
            <a href="#">
                <span>
                    <svg width="25" height="25" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>演出1</title><g fill="#696969" fill-rule="evenodd"><path d="M7 30.423v8.965C7 40.828 8.27 42 9.833 42h30.334C41.73 42 43 40.828 43 39.388v-8.965c-2.492-.64-4.333-2.828-4.333-5.423 0-2.596 1.84-4.785 4.333-5.424V10.61C43 9.17 41.73 8 40.167 8H9.833C8.27 8 7 9.17 7 10.61v8.966c2.492.64 4.333 2.828 4.333 5.424 0 2.595-1.84 4.785-4.333 5.423M40.167 45H9.833C6.617 45 4 42.483 4 39.388V29.11c0-.828.67-1.5 1.5-1.5 1.562 0 2.833-1.17 2.833-2.61s-1.27-2.612-2.833-2.612c-.83 0-1.5-.67-1.5-1.5V10.61C4 7.518 6.617 5 9.833 5h30.334C43.384 5 46 7.517 46 10.61V20.89c0 .83-.672 1.5-1.5 1.5-1.562 0-2.833 1.172-2.833 2.612 0 1.44 1.27 2.61 2.833 2.61.828 0 1.5.672 1.5 1.5V39.39C46 42.483 43.384 45 40.167 45"></path><path d="M28.177 30.642c.203.07.34.14.475.14.134 0 .256-.018.337-.09.135-.14.203-.397.135-.813l-.473-2.845c0-.347.134-.763.337-.97l1.964-2.013c.203-.277.27-.555.203-.763 0-.14-.135-.417-.61-.486l-2.776-.416c-.27 0-.61-.278-.744-.555l-1.22-2.567c-.135-.277-.27-.485-.54-.485-.273 0-.476.14-.68.486l-1.218 2.567c-.067.208-.474.485-.745.555l-2.777.416c-.406.07-.54.347-.61.485-.135.277 0 .554.204.762l1.964 2.012c.204.208.407.694.34.97l-.475 2.845c-.07.346.067.623.27.762.27.14.542.14.812 0l2.438-1.318c.272-.14.678-.14.95 0l2.437 1.318z"></path></g></svg>
                    <p>演出</p>
                </span>
            </a>
            <a href="#">
                <span>
                    <svg width="25" height="25" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>我的1</title><g fill="#696969" fill-rule="evenodd"><path d="M19.916 35.913c-.014-.016-.02-.036-.033-.05-.314-.32-.737-.455-1.153-.432C13.586 33.066 10 27.9 10 21.908 10 13.687 16.728 7 25 7c8.27 0 15 6.687 15 14.907 0 8.22-6.73 14.906-15 14.906-1.787 0-3.493-.328-5.084-.9zm14.502 1.225C39.558 33.98 43 28.343 43 21.908 43 12.032 34.925 4 25 4S7 12.033 7 21.907c0 6.657 3.68 12.466 9.113 15.552l-6.086 5.97c-.59.58-.6 1.53-.02 2.12.294.3.682.45 1.07.45.38 0 .76-.143 1.052-.43l6.916-6.785c1.867.654 3.865 1.028 5.954 1.028 2.324 0 4.54-.455 6.58-1.256l7.15 7.014c.292.287.672.43 1.05.43.39 0 .78-.15 1.072-.45.58-.59.57-1.54-.02-2.12l-6.414-6.292z"></path><path d="M30.358 25.068c-.77-.31-1.642.064-1.95.832-.554 1.375-1.89 2.263-3.408 2.263-1.503 0-2.835-.877-3.395-2.234-.316-.766-1.19-1.13-1.96-.815-.765.316-1.13 1.193-.813 1.96 1.024 2.483 3.446 4.088 6.168 4.088 2.75 0 5.178-1.627 6.19-4.144.31-.77-.063-1.643-.832-1.952"></path></g></svg>
                    <p>我的</p>
                </span>
            </a>
        </div>
    </script>
    <script>
        //创建组件
        //头部
        let myheader = {
            template: `#head`
        }

        let mycontent = {
            //5.接收从父组件传过来的参数
            props: ["movie"],
            //6.渲染
            template: `#count`
        }

        var myfooter = {
            template: `#foolt`
        }

        //0.父组件
        var app = new Vue({
            el: "#app",
            data: {
                movieArr: []
            },
            created() {
                axios.get("./json/yingyuan.json").then(vel => {
                    console.log(vel.data.data.cinemas);
                    this.movieArr = vel.data.data.cinemas;
                });
            },
            //2.引入组件
            components: {
                myheader, mycontent, myfooter
            }
        });
    </script>
</body>

</html>